<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-29 11:01:56
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-06-04 17:03:47
 * @FilePath: /vue3-uniapp/src/pages/tabbar/AreaOrderList/components/FilterView/FilterView.vue
-->
<script lang="ts" setup>
import { useEnum } from '@/service/useEnum';
import { useAfterAuth } from '@/service/hook/useAfterAuth';
import { OrderSearchRequestParam } from '@/service/useMy';
import { useAppStore } from '@/store/index';

// const { enumRecords } = useEnum([
//     'orderSourceTypes',
//     'severityTypes',
//     'orderStatus',
//     'appealTypes',
//     'satisfyTypes'
// ]);
const {
    getOrderSourceTypes,
    severityTypes,
    getOrderStatusTypes,
    getAppealTypeCodeTypes,
    satisfyTypes
} = useEnum();

const { refData: orderSourceTypes } = getOrderSourceTypes();
const { refData: orderStatusTypes } = getOrderStatusTypes();
const { refData: appealTypeCodeTypes } = getAppealTypeCodeTypes();

const props = defineProps<{
    modelValue: OrderSearchRequestParam;
}>();

const emits = defineEmits<{
    (event: 'update:modelValue', value: OrderSearchRequestParam): void;
    (event: 'confirm'): void;
    (event: 'reset'): void;
}>();

const { modelValue } = toRefs(props);

const { cssVarObject } = storeToRefs(useAppStore());

const dropdownData = computed({
    get() {
        return [
            modelValue.value.sourceType,
            modelValue.value.level,
            modelValue.value.status,
            modelValue.value.timeLimitCode,
            modelValue.value.appealType,
            modelValue.value.orderType,
            modelValue.value.satisfyType
        ];
    },
    set(val) {
        emits('update:modelValue', {
            ...modelValue.value,
            sourceType: val[0],
            level: val[1],
            status: val[2],
            timeLimitCode: val[3],
            appealType: val[4],
            orderType: val[5],
            satisfyType: val[6]
        });
    }
});

const dropdownList = computed(() => {
    return [
        {
            name: '事件来源',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                ...orderSourceTypes.value
            ]
        },
        {
            name: '紧急程度',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                ...severityTypes
            ]
        },
        {
            name: '事件状态',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                ...orderStatusTypes.value
            ]
        },
        {
            name: '时限',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                {
                    label: '已经超时',
                    value: 1
                },
                {
                    label: '即将超时',
                    value: 2
                }
            ]
        },
        {
            name: '诉求类型',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                ...appealTypeCodeTypes.value
            ]
        },
        {
            name: '流转类型',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                {
                    label: '提报',
                    value: 1
                },
                {
                    label: '派发',
                    value: 2
                }
            ]
        },
        {
            name: '评价类型',
            list: [
                {
                    label: '全部',
                    value: undefined
                },
                ...satisfyTypes
            ]
        }
    ];
});

const collapseOpen = ref(false);

useAfterAuth(() => {});
</script>

<template>
    <view class="filterview-container">
        <CustomCollapse v-model="collapseOpen" title="更多筛选">
            <view class="content">
                <WyyFilterDropdown
                    v-model="dropdownData"
                    :dropdownList="dropdownList"
                />
                <view class="mt-[10rpx]">
                    <TnInput
                        :model-value="modelValue.content"
                        placeholder="搜索标题或内容"
                        @update:model-value="
                            (value: string | number) => {
                                const model = JSON.parse(
                                    JSON.stringify(modelValue)
                                );
                                model.content = `${value}`;
                                emits('update:modelValue', model);
                            }
                        "
                    >
                        <template #prefix>
                            <TnIcon name="search" />
                        </template>
                    </TnInput>
                </view>

                <view
                    class="flex flex-row items-center justify-between mt-[10rpx]"
                >
                    <TnButton
                        :bg-color="cssVarObject['--bg-orange']"
                        :text-color="'#ffffff'"
                        :size="'xl'"
                        width="350rpx"
                        @click="
                            () => {
                                collapseOpen = false;
                                emits('reset');
                            }
                        "
                        >重置</TnButton
                    >
                    <TnButton
                        :bg-color="cssVarObject['--bg-primary']"
                        :text-color="'#ffffff'"
                        :size="'xl'"
                        width="350rpx"
                        @click="
                            () => {
                                collapseOpen = false;
                                emits('confirm');
                            }
                        "
                        >确定</TnButton
                    >
                </view>
            </view>
        </CustomCollapse>
    </view>
</template>

<style lang="scss" scoped>
.filterview-container {
    .content {
        padding: 16rpx 20rpx;
    }
}
</style>
